<template>
	<view>
		<view class="todo-item-title">
			<view class="left">
				<uni-icons type="notification" size="30"></uni-icons>
				<text class="text">当前待办事项数：</text>
				<view class="total-number"> {{total}}</view>
			</view>

			<view class="right">
				<uni-icons type="plusempty" size="30" @click="addTodoHandler"></uni-icons>
			</view>
		</view>
		<uni-swipe-action>
			<view class="todo-list" v-for="(item,i) in todolist" :key="i">
				<uni-swipe-action-item :right-options="options" @click="todoChecked(item)">
					<myTodoItem :todo-item="item" @getInput="getInput" @showDescription="showDescription" @delete-todo="deleteTodoHandler" />
				</uni-swipe-action-item>
			</view>
		</uni-swipe-action>
	</view>
</template>


<script>
	import axios from 'request/todo.js'
	import myTodoItem from 'components/my-todo-item.vue'

	export default {
		//待办事项的自定义组件
		components: {
			// 注册
			myTodoItem
		},

		data() {
			return {
				//待办列表
				todolist: [],

				//待办事项数
				total: 0,

				//滑动按钮的参数
				options: [{
					text: '完成',
					style: {
						backgroundColor: 'green',
					}
				}],

				newDescription: ''
			}
		},

		onLoad() {
			//页面加载时就获取待办列表
			this.getList()
			
			//页面加载时统计未完成待办数
			this.getTotal()
		},

		methods: {
			//从后台获取待办数据列表
			async getList() {

				const res = await axios.get('/tasks/202225220503')

				if (res) {
					if (res.msg !== 'success') {
						uni.showToast({
							title: '获取数据失败！',
							icon: 'error'
						})
					} else {
						this.todolist = res.data
						//成功获得列表后，计算未完成待办的数量
						this.getTotal()
					}
				}
			},

			//删除待办
			async deleteTodoHandler(e) {

				const res = await axios.delete(`/tasks/${e.taskId}`)

				if (res) {
					if (res.msg !== 'success') {
						uni.showToast({
							title: '删除数据失败！',
							icon: 'error'
						})
					} else {
						uni.showToast({
							title: '删除成功！'
						})
						this.getList()
					}
				}
			},

			//在后台添加一条新待办
			async postNewTodo() {
				const res = await axios.post('/tasks', {
					"realStudentId": "202225220503",
					"description": this.newDescription,
					"status": 0,
				})

				if (res) {
					if (res.msg !== 'success') {
						uni.showToast({
							title: '新增数据失败！',
							icon: 'error'
						})
					} else {
						uni.showToast({
							title: '新增待办成功！'
						})
						this.getList()
					}
				}

			},

			//获取新增待办的内容
			addTodoHandler() {
				uni.showModal({
					title: '新增待办',
					placeholderText: '请输入：',
					editable: true,
					success: (res) => {
						if (res.confirm) {
							this.newDescription = res.content
							this.postNewTodo()
						}
					}
				})
			},

			//获取子组件修改待办时输入的新内容
			getInput(e) {
				if (e.newDescription) {
					this.newDescription = e.newDescription
					this.putNewTodo(e.taskId)
				} else return uni.showToast({
					title: '代办描述不能为空！！',
					icon: 'error'
				})
			},

			//对后台待办数据做修改
			async putNewTodo(taskId) {
				const res = await axios.put(`/tasks/${taskId}`, {
					"realStudentId": "202225220503",
					"description": this.newDescription,
					"status": 0
				}, )

				if (res) {
					if (res.code === 1) {
						uni.showToast({
							title: "修改待办成功！"
						})
						this.getList()
					} else {
						uni.showToast({
							title: "操作失败！",
							icon: "error"
						})
					}
				}

			},

			async todoChecked(item) {
				console.log('触发点击', item)
				const res = await axios.put(`/tasks/${item.taskId}`, {
					"realStudentId": item.realStudentId,
					"description": item.description,
					"status": 1
				})

				if (res) {
					if (res.code === 1) {
						uni.showToast({
							title: "待办已完成！"
						})
						this.getList()
					} else {
						uni.showToast({
							title: "操作失败！",
							icon: "error"
						})
					}
				}
			},
			
			//获得未完成待办的总数
			getTotal(){
			     this.total=0;
				 this.todolist.forEach(x => {if(x.status===0) this.total++})	
			},
			
			//点击显示详细待办描述
			showDescription(mes){
				console.log('触发了点击',mes)
				uni.showModal({
					title:"待办描述",
					content:mes
				})
			}
		},
	}
</script>


<style lang="scss">
	.todo-item-title {
		display: flex;
		padding: 10px;
		align-items: center;
		justify-content: space-between;

		.left {
			width: 80%;
			display: flex;

			.text {
				font-size: 20px;
			}

			.total-number {
				padding-left: 10px;
				font-size: 22px;
				color: #C00000;
			}
		}

		.right {
			display: flex;
			width: 20%;
			justify-content: center;
		}
	}

	.todo-list {
		padding: 10px 15px;
		border-bottom: solid 2px #efefef;
	}
</style>